<template>
	<view class="page">
		<view v-if="dataList.length>0">

			<view class="list" v-for="(fitem, findex) in dataList" :key="findex">

				<view class="title" @click="showMore(fitem)">

					<text>{{filterNull(fitem.name)}}</text>
<!-- 					<u-icon :name="fitem.showmore?'arrow-down':'arrow-right'"></u-icon> -->
				</view>

				<view >
					<view style="display: flex;line-height: 56upx;" v-for="(item, index) in fitem.data" :key="index">
						<text class="label">{{item.paramName}}:</text>
						<text class="label">{{filterNull(item.paramValue)}}</text>
					</view>
				</view>

			</view>

		</view>

		<no-data v-else></no-data>
	</view>
</template>

<script>
	import {
		schemeparamlist
	} from '../../common/api.js';

	export default {
		data() {
			return {
				modelId: '',
				dataList: []
			};
		},
		methods: {
			getData() {
				schemeparamlist({
					params: {
						carModelId: this.modelId
					}
				}).then(res => {
					this.dataList = res;
					
					this.dataList.map(item=>{
						item.showmore = true
						return item
					})
				})
			},

			showMore(fitem) {
				fitem.showmore = !fitem.showmore
				this.$forceUpdate()
			}
		},
		onLoad(op) {
			this.modelId = op.modelId;
			this.getData();

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 32upx;
	}

	.list {
		display: flex;
		flex-direction: column;
		margin-bottom: 24upx;
		padding: 32upx;
		background: #fff;
		border-radius: 8upx;
		text{
			font-size: 24upx;
		}
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32upx;
			text {
				font-size: 32upx;
				font-weight: bold;
				color: #000000;
				line-height: 44upx;
			}
		}
		
	
	}

	.label {
		color: #666666;
		font-size: 24upx;
		margin-bottom: 16upx;
		margin-right:16upx;
	}
</style>
